<!--
 * @Author: liuxinjia 15201611813@163.com
 * @Date: 2023-08-14 15:10:26
 * @LastEditors: liuxinjia 15201611813@163.com
 * @LastEditTime: 2023-08-14 17:17:26
 * @FilePath: \TicketPrintWebPlatformd:\当前项目\马上签金融机构前端项目\gitLab\MashangqianWebByBank\src\components\upload.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app">
    <el-upload
      action="https://api.yoojet.com/Base_Manage/Upload/Filleimag"
      :headers="headers"
      :on-remove="handleRemove"
      :file-list="fileList"
      list-type="picture-card">
      <!-- <el-button size="small" type="primary">点击上传</el-button> -->
       <i slot="default" class="el-icon-plus"></i>

      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>

    <image-viewer
      v-if="imgViewerVisible"
      :urlList="[previewUrl]"
      :on-close="onClose"></image-viewer>
  </div>
</template>

<script>
import ImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    ImageViewer,
  },
  data() {
    return {
      // 上传的文件列表
      fileList: [],
      // 请求头
      headers: {
        Authorization: window.sessionStorage.getItem("token"),
      },
      previewUrl: "",
      imgViewerVisible: false,
    };
  },
  methods: {
    // 移除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      // 1. 预览图片的url地址保存
      this.previewUrl = file.response.data.url;
      // 2. 设置 图片查看器 进行显示
      this.imgViewerVisible = true;
      //  3. 解决 显示大图预览后发现鼠标上下滚动放大缩小图片时，遮罩后面的页面如果有滚动条，也会跟着滚动，体验感不好
      this.stopMove();
    },
    onClose() {
      this.imgViewerVisible = false;
      // 3. 解决 显示大图预览后发现鼠标上下滚动放大缩小图片时，遮罩后面的页面如果有滚动条，也会跟着滚动，体验感不好
      this.move();
    },
    // 停止页面滚动
    stopMove() {
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },

    // 开启页面滚动
    move() {
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "auto";
      document.removeEventListener("touchmove", m, true);
    },
  },
};
</script>

<style scoped>
.app {
  height: 3000px;
}
</style>